<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
    <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8">-->
    <!--<meta charset="utf-8">-->
    <!--<meta name="viewport" content="width=640,user-scalable=no"/>-->

    <!--<title>申请成为坊主</title>-->


    <!--<style>-->
        <!--*{margin:0;padding:0;list-style:none;border:0;}-->
        <!--.form1{padding:100px;float:left}-->
        <!--.yearout{float:left;position:relative;width:100px;text-align:center;margin-right:25px;}-->
        <!--.yearhead,.monthhead,.dayhead{width:100%;border:1px solid #ccc;line-height:30px;cursor:pointer;}-->
        <!--.years,.months,.days{width:100%;border:1px solid #ccc;border-top:0;line-height:30px;cursor:pointer;max-height:300px;overflow-y:auto;display:none;}-->
        <!--.years div:hover,.months div:hover,.days div:hover{background:red}-->
        <!--.months{float:left;position:relative;}-->
        <!--.days{float:left;position:relative;}-->

    <!--</style>-->

<!--</head>-->

<!--<body>-->
<!--<div class="form1">-->
    <!--<div class="yearout">-->
        <!--<div class="yearhead">2016</div>-->
        <!--<div class="years">-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="yearout">-->
        <!--<div class="monthhead">12</div>-->
        <!--<div class="months">-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="yearout">-->
        <!--<div class="dayhead">28</div>-->
        <!--<div class="days">-->
        <!--</div>-->
    <!--</div>-->

<!--</div>-->
<!--<script src="../js/jquery-3.0.0.min.js"></script>-->

<!--<script>-->


    <!--$(function(){-->
        <!--var D1=new DateTime();-->
        <!--D1.init('.form1',{//最外层div-->
            <!--yearhead:'.yearhead',//选定的年-->
            <!--monthhead:'.monthhead',//选定的月-->
            <!--dayhead:'.dayhead',//选定的日-->
            <!--year:'.years',//年容器-->
            <!--month:'.months',//月容器-->
            <!--day:'.days'//日容器-->
        <!--});-->


        <!--$('.yearout').each(function(index, element) {//点击显示-->
            <!--$(element).click(function(e) {-->
                <!--$(element).find('div:eq('+1+')').show();-->
                <!--$(element).siblings('.yearout').find('div:eq('+1+')').hide();-->

            <!--});-->
        <!--});-->


    <!--})-->


    <!--function DateTime(){-->
        <!--this.set={-->
            <!--yearhead:'.yearhead',//选定的年-->
            <!--monthhead:'.monthhead',//选定的月-->
            <!--dayhead:'.dayhead',//选定的日-->
            <!--year:'.years',//年容器-->
            <!--month:'.months',//月容器-->
            <!--day:'.days'//日容器-->
        <!--}-->
    <!--}-->

    <!--DateTime.prototype.init=function(obj1,obj2){-->
        <!--var This=this;-->
        <!--this.obj=$(obj1);-->
        <!--$.extend(This.set,obj2);//合并多个对象-->
        <!--this.obj.each(function(index,element){-->
            <!--var myDate = new Date();-->
            <!--var nowyear=myDate.getFullYear();//当前年份-->
            <!--var nowmonth=myDate.getMonth()+1;//当前月份-->
            <!--var nowday=myDate.getDate();//当前几号-->
            <!--var secyear=nowyear;//选择年份-->
            <!--var secmonth=nowmonth;//选择月份-->
            <!--var secday=nowday;//选择日-->
            <!--var nums=[28,29,30,31];-->

            <!--years()-->
            <!--months()-->
            <!--days()-->
            <!--setdatetime({-->
                <!--nowyear:nowyear+"年",-->
                <!--nowmonth:nowmonth+"月",-->
                <!--nowday:nowday+"日"-->
            <!--});//设置最初始的时间-->

            <!--function setdatetime(times){//设置选中的当前时间-->
                <!--$(element).find(This.set.yearhead).html(times.nowyear)-->
                <!--$(element).find(This.set.monthhead).html(times.nowmonth)-->
                <!--$(element).find(This.set.dayhead).html(times.nowday)-->
            <!--}-->

            <!--$(document).on('click',obj1+':eq('+index+') '+This.set.year+' div',function(e) {-->
                <!--secyear=$(this).html()-->
                <!--var re = /年|月|日/g-->
                <!--secyear=secyear.replace(re,'');-->
                <!--$(this).parent(This.set.year).hide()-->
                <!--days();-->
                <!--setdatetime({-->
                    <!--nowyear:secyear+"年"-->
                <!--});-->
            <!--});-->
            <!--$(document).on('click',obj1+':eq('+index+') '+This.set.month+' div',function(e) {-->
                <!--secmonth=$(this).html();-->
                <!--var re = /年|月|日/g-->
                <!--secmonth=secmonth.replace(re,'');-->
                <!--$(this).parent(This.set.month).hide()-->
                <!--days();-->
                <!--setdatetime({-->
                    <!--nowmonth:secmonth+"年"-->
                <!--});-->
            <!--});-->
            <!--$(document).on('click',obj1+':eq('+index+') '+This.set.day+' div',function(e) {-->
                <!--secday=$(this).html();-->
                <!--var re = /年|月|日/g-->
                <!--secday=secday.replace(re,'');-->
                <!--$(this).parent(This.set.day).hide()-->
                <!--setdatetime({-->
                    <!--nowday:secday+"日"-->
                <!--});-->
            <!--});-->

            <!--function years(){-->
                <!--for(i=2021;i>=1980;i&#45;&#45;){-->
                    <!--if(i==nowyear){-->
                        <!--$(element).find(This.set.year).append('<div >'+i+'年</div>');-->
                    <!--}else{-->
                        <!--$(element).find(This.set.year).append('<div>'+i+'年</div>');-->
                    <!--}-->
                <!--}-->
            <!--}-->

            <!--function months(){-->
                <!--for(i=12;i>=1;i&#45;&#45;){-->
                    <!--if(i==nowmonth){-->
                        <!--$(element).find(This.set.month).append('<div>'+i+'月</div>');-->
                    <!--}else{-->
                        <!--$(element).find(This.set.month).append('<div>'+i+'月</div>');-->
                    <!--}-->
                <!--}-->

            <!--}-->
            <!--function days(){-->

                <!--$(element).find(This.set.day).html('');//清空原有数据-->
                <!--var day_num=nums[3]-->
                <!--//This.runnian(secyear)&&secmonth==2?day_num=nums[1]:day_num=day_num-->
                <!--if(This.runnian(secyear)&&secmonth){-->
                    <!--day_num=nums[1]-->
                <!--}-->

                <!--if((secmonth==1||secmonth==3||secmonth==5||secmonth==7||secmonth==8||secmonth==10||secmonth==12)){-->
                    <!--day_num=nums[3];-->
                <!--}-->
                <!--if((secmonth==4||secmonth==6||secmonth==9||secmonth==11)){-->
                    <!--day_num=nums[2];-->
                <!--}-->

                <!--if(!This.runnian(secyear)&&secmonth==2){-->
                    <!--day_num=nums[0];-->
                <!--}-->
                <!--setdatetime({-->
                    <!--nowmonth:12+"月",-->
                    <!--nowday:day_num+"日"-->
                <!--});-->
                <!--for(i=day_num;i>=1;i&#45;&#45;){-->
                    <!--if(i==nowday){-->
                        <!--$(element).find(This.set.day).append('<div>'+i+'日</div>');-->
                    <!--}else{-->
                        <!--$(element).find(This.set.day).append('<div>'+i+'日</div>');-->
                    <!--}-->
                <!--}-->
            <!--}-->
        <!--})-->

    <!--}-->

    <!--DateTime.prototype.runnian=function(secyear){//判断是否闰年-->
        <!--return ((secyear%4==0&&secyear%100!=0)||secyear%400==0)-->
    <!--}-->

<!--</script>-->

<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<!--<head>-->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--<title>H5地理位置Demo</title>-->
    <!--<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">-->
    <!--</script>-->

<!--</head>-->
<!--<body>-->
<!--<div  id="aaa" style="border:#ccc solid 1px;width:697px;height:500px"></div>-->
<!--<script type="text/javascript">-->
    <!--if(navigator.geolocation)-->
    <!--{-->
        <!--navigator.geolocation.getCurrentPosition(function (p) {-->
                    <!--var latitude = p.coords.latitude//纬度-->
                    <!--var longitude = p.coords.longitude;-->
                    <!--createmap(latitude, longitude);-->

                <!--}, function (e) {//错误信息-->
                    <!--var aa = e.code + "\n" + e.message;-->
                    <!--alert(aa);-->
                <!--}-->
        <!--);-->
    <!--}-->
    <!--function createmap(a,b)-->
    <!--{-->
        <!--var map = new BMap.Map("aaa");-->
        <!--var point = new BMap.Point(b, a);-->
        <!--map.centerAndZoom(point, 20);//设置地图的中心点和坐标-->
        <!--Window.map = map;//将map变量存储在全局-->

    <!--}-->

<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--<!DOCTYPE HTML>-->
<!--<html>-->
<!--<head>-->
    <!--<meta charset="utf-8">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
    <!--<title>演示：HTML5获取地理位置定位信息</title>-->
    <!--<meta name="keywords" content="html5,地理位置" />-->
    <!--<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="../css/main.css" />-->
    <!--<style type="text/css">-->
        <!--.demo{width:560px; margin:60px auto 10px auto}-->
        <!--.geo{margin-top:20px}-->
        <!--.demo p{line-height:32px; font-size:16px}-->
        <!--.demo p span,#baidu_geo,#google_geo{font-weight:bold}-->
    <!--</style>-->

<!--</head>-->

<!--<body>-->


<!--<div id="main">-->
    <!--<div class="demo">-->
        <!--<div class="geo">-->
            <!--<p>百度地图定位位置：</p>-->
            <!--<p id="baidu_geo"></p>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<!--<script>-->
    <!--function getLocation(){-->
        <!--if (navigator.geolocation){-->
            <!--navigator.geolocation.getCurrentPosition(showPosition,showError);-->
        <!--}else{-->
            <!--alert("浏览器不支持地理定位。");-->
        <!--}-->
    <!--}-->

    <!--function showPosition(position){-->
        <!--var latlon = position.coords.latitude+','+position.coords.longitude;-->

        <!--//baidu-->
        <!--var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";-->
        <!--$.ajax({-->
            <!--type: "GET",-->
            <!--dataType: "jsonp",-->
            <!--url: url,-->
            <!--beforeSend: function(){-->
                <!--$("#baidu_geo").html('正在定位...');-->
            <!--},-->
            <!--success: function (json) {-->
                <!--if(json.status==0){-->
                    <!--var add = json.result.formatted_address;-->
                    <!--var addre = add.substr(3,3);-->
                    <!--$("#baidu_geo").html(addre);-->
                <!--}-->
            <!--},-->
            <!--error: function (XMLHttpRequest, textStatus, errorThrown) {-->
                <!--$("#baidu_geo").html(latlon+"地址位置获取失败");-->
            <!--}-->
        <!--});-->

    <!--}-->

    <!--function showError(error){-->
        <!--switch(error.code) {-->
            <!--case error.PERMISSION_DENIED:-->
                <!--alert("定位失败,用户拒绝请求地理定位");-->
                <!--break;-->
            <!--case error.POSITION_UNAVAILABLE:-->
                <!--alert("定位失败,位置信息是不可用");-->
                <!--break;-->
            <!--case error.TIMEOUT:-->
                <!--alert("定位失败,请求获取用户位置超时");-->
                <!--break;-->
            <!--case error.UNKNOWN_ERROR:-->
                <!--alert("定位失败,定位系统失效");-->
                <!--break;-->
        <!--}-->
    <!--}-->

    <!--getLocation();-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        li{
            list-style-type: none;
            text-align: center;
            line-height: 40px;

        }
        .nba>li{
            float: left;

            width: 100px;
            height: 40px;
            border: 1px solid red;
            position: relative;
        }

        .a1,.a2,.a3{
            position: absolute;
            top: 0px;
            left: -40px;
            z-index: 5;
            display: none;

        }
        .a1>li,.a2>li,.a3>li{
            background-color: sandybrown;
            width: 100px;
            height: 40px;
            border: 1px solid red;

        }
        .show{
            display: block;
        }
        .hide{
            display: none;

        }
        .a1>li:hover{
            background-color: green;
        }
    </style>
</head>
<body>
<ul class="nba">
    <li class="one">
        <a href="###">请选择</a>
        <ul class="a1">

        </ul>
    </li>
    <li class="two">
        <a href="###">请选择</a>
        <ul class="a2">

        </ul>
    </li>
    <li class="three">
        <a href="###">请选择</a>
        <ul class="a3">

        </ul>
    </li>
</ul>
</body>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/adress.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var index;
    console.log(aaa.length);
    //		开始
    $('.one>a').click(function  () {
        //清空li
        $('.a1>li').remove();

        //循环添加
        for (var i=0;i < aaa.length;i++) {
            $('.a1').append('<li>'+aaa[i].name+'</li>');
        };


        $('.a1>li').click(function  () {
            index = $(this).index();
            $('.a1').toggle("slow");
            $('.a2').text('');
            $('.a3').text('');
            $('.one>a').text($(this).text());
            $('.a2>li').remove();
            for (var j=0;j < aaa[index].cityList.length;j++) {
                $('.a2').append('<li>'+aaa[index].cityList[j].name+'</li>');
            }

            $('.a2>li').click(function  () {
                $('.a2').toggle("slow");
                $('.a3').text('');
                $('.a3>li').remove();
                $('.two>a').text($(this).text());
//				console.log(aaa[index].cityList[$(this).index()].areaList.length)
                for (var k =0;k<aaa[index].cityList[$(this).index()].areaList.length;k++) {
                    $('.a3').append('<li>'+aaa[index].cityList[$(this).index()].areaList[k]+'</li>')
                }


                $('.a3>li').click(function  () {

                    $('.a3').toggle("slow");
                    $('.three>a').text($(this).text());
                })
            })




        })



    })
    $('.one>a').click(function  () {
        $('.a1').toggle("slow");
    });

    $('.two>a').click(function  () {
        $('.a2').toggle("slow");
    });

    $('.three>a').click(function  () {
        $('.a3').toggle("slow");

    });
    $('.a3>li').click(function  () {
        $('.three>a').text('');
        $('.three>a').text($(this).text());
        $('.a3').toggle("slow")	;
    })


</script>
</html>